@import "../mixin/mixin.less";
@import "../var/var.less";

.oy-menu-group .btn-list .oy-menu-item {
  @{top} & {
    .CircleItem();
  }

  @{bottom} & {
    .CircleItem();
  }

  @{left} & {
    .CircleItem();
  }

  @{right} & {
    .CircleItem();
  }

  @{middle} & {
    .CircleItem();
  }

  .middle-around & {
    .CircleItem();
  }

}

.oy-menu-group.open .btn-list .oy-menu-item {
  @{top} & {
    opacity: 1;
  }

  @{bottom} & {
    opacity: 1;
  }

  @{left} & {
    opacity: 1;
  }

  @{right} & {
    opacity: 1;
  }

  @{middle} & {
    opacity: 1;
  }

  .middle-around & {
    opacity: 1;
  }

}

// top 样式
.top-open(@n, @i: 1) when (@i =< @n) {
  .top .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
    top: (@i * @MenuPrepSpace);
    transition: 0.2s 0.1s;
  }
  .top-open(@n, (@i + 1));
}

.top(@n, @i: 1) when (@i =< @n) {
  .top .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
    transition: 0.2s 0.1s;
  }
  .top(@n, (@i + 1));
}

.top(6);
.top-open(6);

// bottom的样式
.bottom-open(@n, @i: 1) when (@i =< @n) {
  .bottom .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
    top: (@i * @MenuSpace);
  }
  .bottom-open(@n, (@i + 1));
}

.bottom(@n, @i: 1) when (@i =< @n) {
  .bottom .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
    transition: 0.2s 0.1s;
  }
  .bottom(@n, (@i + 1));
}

.bottom(6);
.bottom-open(6);

//left的样式
.left-open(@n, @i: 1) when (@i =< @n) {
  .left .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
    left: (@i * @MenuSpace);
  }
  .left-open(@n, (@i + 1));
}

.left(@n, @i: 1) when (@i =< @n) {
  .left .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
    transition: 0.2s 0.1s;
  }
  .left(@n, (@i + 1));
}

.left(6);
.left-open(6);

//right的样式
.right-open(@n, @i: 1) when (@i =< @n) {
  .right .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
    left: (@i * @MenuPrepSpace);
  }
  .right-open(@n, (@i + 1));
}

.right(@n, @i: 1) when (@i =< @n) {
  .right .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
    transition: 0.2s 0.1s;
  }
  .right(@n, (@i + 1));
}

.right-open(6);
.right(6);

//middle的样式
.middle(@n, @i: 1) when (@i =< @n) {
  .middle .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
    transition: 0.2s 0.1s;
  }
  .middle(@n, (@i + 1));
}

.middle(6);
.middle .oy-menu-group.open .btn-list {
  & .oy-menu-item.oy-menu-item_1 {
    left: @MenuPrepSpace;
  }

  & .oy-menu-item.oy-menu-item_2 {
    left: @MenuSpace;
  }

  & .oy-menu-item.oy-menu-item_3 {
    left: 2*@MenuPrepSpace;
  }

  & .oy-menu-item.oy-menu-item_4 {
    left: 2*@MenuSpace;
  }

  & .oy-menu-item.oy-menu-item_5 {
    left: 3*@MenuPrepSpace;
  }

  & .oy-menu-item.oy-menu-item_6 {
    left: 3*@MenuSpace;
  }
}


//middle-around的样式
.middle-around(@n, @i: 1) when (@i =< @n) {
  .middle-around .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
    transition: 0.2s 0.1s;
  }
  .middle-around(@n, (@i + 1));
}

.middle-around(6);
.middle-around .oy-menu-group.open .btn-list {
  & .oy-menu-item.oy-menu-item_1 {
    left: (@MenuPrepSpace)-20px;
    top: 0px;
  }

  & .oy-menu-item.oy-menu-item_2 {
    left: (@MenuSpace)+20px;
    top: 0px;
  }

  & .oy-menu-item.oy-menu-item_3 {
    left: (@MenuPrepSpace)+15px;
    top: (@MenuPrepSpace)-10px;
  }

  & .oy-menu-item.oy-menu-item_4 {
    left: (@MenuSpace)-15px;
    top: (@MenuPrepSpace)-10px;
  }

  & .oy-menu-item.oy-menu-item_5 {
    left: (@MenuPrepSpace)+15px;
    top: (@MenuSpace)+10px;
  }

  & .oy-menu-item.oy-menu-item_6 {
    left: (@MenuSpace)-15px;
    top: (@MenuSpace)+10px;
  }
}
